<template>
  <div class="tool-bar">
    <div class="tool-bar-item"
         v-for="(item,index) in toolBarData"
         :key="index"
         @click="onChangeFragment(item,index)">
      <img v-bind:src="[selectItemIndex === index ? item.hIcon:item.nIcon]"
           class="tool-bar-item-img">
      <p class="tool-bar-item-name"
         :class="{'tool-bar-item-active':selectItemIndex === index}">{{item.name}}</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      toolBarData: [
        {
          nIcon: require('@img/home-n.svg'),
          hIcon: require('@img/home-h.svg'),
          name: '首页',
          componentName: 'home'
        },
        {
          nIcon: require('@img/shopping-n.svg'),
          hIcon: require('@img/shopping-h.svg'),
          name: '购物车',
          componentName: 'shopping'
        },
        {
          nIcon: require('@img/my-n.svg'),
          hIcon: require('@img/my-h.svg'),
          name: '我的',
          componentName: 'my'
        }
      ],
      selectItemIndex: 0
    }
  },
  methods: {
    onChangeFragment (value, index) {
      this.selectItemIndex = index
      this.$emit('onChangeFragment', value.componentName)
    },
    /*
    指定切换的tab页面
    */
    pushFragment (index) {
      this.onChangeFragment(this.toolBarData[index], index)
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.tool-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: px2rem(46);
  background: white;
  box-shadow: 0 0 px2rem(16) 0 rgba(0, 0, 0, 0.2);
  border-top: 1px solid $lineColor;
  &-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-name {
      font-size: px2rem(14);
      margin-top: px2rem(5);
    }
    &-img {
      width: px2rem(22);
      height: px2rem(22);
    }
    &-active {
      color: $MainColor;
    }
  }
}
</style>